<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>UI Slider 滑块组件</title>
    <script src="./ui-slider.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }

        .container {
            background: white;
            padding: 30px;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
            margin-bottom: 20px;
        }

        h1 {
            color: #333;
            text-align: center;
            margin-bottom: 30px;
        }

        h2 {
            color: #555;
            border-bottom: 2px solid #007bff;
            padding-bottom: 10px;
        }

        .example {
            margin: 20px 0;
            padding: 20px;
            background: #f8f9fa;
            border-radius: 5px;
            border-left: 4px solid #007bff;
        }

        .example h3 {
            margin-top: 0;
            color: #333;
        }

        .controls {
            margin: 20px 0;
        }

        .controls label {
            display: inline-block;
            width: 80px;
            font-weight: bold;
        }

        .controls input {
            margin: 5px 10px;
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }

        .controls button {
            background: #007bff;
            color: white;
            border: none;
            padding: 8px 16px;
            border-radius: 3px;
            cursor: pointer;
            margin: 5px;
        }

        .controls button:hover {
            background: #0056b3;
        }

        .output {
            background: #e9ecef;
            padding: 10px;
            border-radius: 3px;
            font-family: monospace;
            margin-top: 10px;
        }
    </style>
</head>

<body>
    <div class="container">
        <h1>UI Slider 滑块组件演示</h1>

        <div class="example">
            <h3>基础滑块（默认值：0-100）</h3>
            <ui-slider id="slider1"></ui-slider>
            <div class="output" id="output1">当前值: 0</div>
        </div>

        <div class="example">
            <h3>自定义范围滑块（10-200，初始值50）</h3>
            <ui-slider id="slider2" min="10" max="200" value="50"></ui-slider>
            <div class="output" id="output2">当前值: 50</div>
        </div>

        <div class="example">
            <h3>小数范围滑块（0-1，步长0.1）</h3>
            <ui-slider id="slider3" min="0" max="1" value="0.5" step="0.1"></ui-slider>
            <div class="output" id="output3">当前值: 0.5</div>
        </div>

        <div class="example">
            <h3>整数步长滑块（0-20，步长1）</h3>
            <ui-slider id="slider5" min="1" max="20" value="1" step="1"></ui-slider>
            <div class="output" id="output5">当前值: 25</div>
        </div>

        <div class="example">
            <h3>动态控制</h3>
            <div class="controls">
                <label>最小值:</label>
                <input type="number" id="minInput" value="0">
                <label>最大值:</label>
                <input type="number" id="maxInput" value="100">
                <label>步长:</label>
                <input type="number" id="stepInput" value="1" step="0.1">
                <label>当前值:</label>
                <input type="number" id="valueInput" value="0">
                <button onclick="updateSlider()">更新滑块</button>
                <button onclick="resetSlider()">重置</button>
            </div>
            <ui-slider id="slider4"></ui-slider>
            <div class="output" id="output4">当前值: 0</div>
        </div>
    </div>

    <script>
        // 为所有滑块添加事件监听
        document.addEventListener('DOMContentLoaded', function () {
            // 滑块1事件监听
            const slider1 = document.getElementById('slider1');
            const output1 = document.getElementById('output1');
            slider1.addEventListener('change', function (e) {
                output1.textContent = `当前值: ${e.detail.value.toFixed(1)}`;
            });

            // 滑块2事件监听
            const slider2 = document.getElementById('slider2');
            const output2 = document.getElementById('output2');
            slider2.addEventListener('change', function (e) {
                output2.textContent = `当前值: ${e.detail.value.toFixed(1)}`;
            });

            // 滑块3事件监听
            const slider3 = document.getElementById('slider3');
            const output3 = document.getElementById('output3');
            slider3.addEventListener('change', function (e) {
                output3.textContent = `当前值: ${e.detail.value.toFixed(2)}`;
            });

            // 滑块4事件监听
            const slider4 = document.getElementById('slider4');
            const output4 = document.getElementById('output4');
            slider4.addEventListener('change', function (e) {
                output4.textContent = `当前值: ${e.detail.value.toFixed(1)}`;
                // 同步更新输入框
                document.getElementById('valueInput').value = e.detail.value.toFixed(1);
            });

            // 滑块5事件监听
            const slider5 = document.getElementById('slider5');
            const output5 = document.getElementById('output5');
            // slider5.addEventListener('change', function(e) {
            //     output5.textContent = `当前值: ${e.detail.value.toFixed(0)}`;
            // });
        });

        // 动态控制函数
        function updateSlider() {
            const slider4 = document.getElementById('slider4');
            const minValue = parseFloat(document.getElementById('minInput').value);
            const maxValue = parseFloat(document.getElementById('maxInput').value);
            const stepValue = parseFloat(document.getElementById('stepInput').value);
            const currentValue = parseFloat(document.getElementById('valueInput').value);

            slider4.min = minValue;
            slider4.max = maxValue;
            slider4.step = stepValue;
            slider4.value = currentValue;
        }

        function resetSlider() {
            document.getElementById('minInput').value = 0;
            document.getElementById('maxInput').value = 100;
            document.getElementById('stepInput').value = 1;
            document.getElementById('valueInput').value = 0;
            updateSlider();
        }
    </script>
</body>

</html>